{% extends 'base.html' %}
{% block title %}
    上传
{% endblock %}
{% block style %}
    <style>
        .layui-form-label {
            width: 120px;
        }

        .layui-input-block {
            margin-left: 150px;
        }
    </style>
{% endblock %}
{% block body %}

    <div class="from_main">

        <fieldset class="layui-elem-field layui-field-title">
            <legend>上传文件</legend>
        </fieldset>


        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">请输入标题</label>
                <div class="layui-input-block">
                    <input type="text" id="title" name="title" lay-verify="title" autocomplete="off"
                           placeholder="产品名+大写站点+年月日（例如 自行车-US-xxxx/xx/xx）" class="layui-input">
                </div>
            </div>
            <hr style="margin: 40px auto 40px;">
            <div class="layui-form-item">
                <label class="layui-form-label">文件上传</label>
                <div class="layui-upload-drag" id="upload">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                    <p>文件格式限定为Excel</p>
                    <div class="layui-hide" id="uploadDemoView">
                        <hr>
                        <img src="{{ url_for('static',filename='images/success.png') }}" alt="上传成功后渲染"
                             style="max-width: 35px">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">绑定业务员</label>
                <div class="layui-input-block" id="user">

                </div>
            </div>
            <hr style="margin: 40px auto 40px;">
            <button type="button" class="layui-btn" id="submit" style="margin: 20px 0 0 70%;">开始上传</button>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script src="{{ url_for('static',filename='layui/layui.js') }}" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.config({
            base: '{{ url_for('static', filename='layui/modules/')}}'
        }).extend({
            selectInput: 'selectInput/selectInput'
        }).use(['form', 'selectInput'], function () {
            let $ = layui.$,
                selectInput = layui.selectInput,
                form = layui.form,
                layer = layui.layer,
                upload = layui.upload;
            selectInput.render('#user', {
                // 容器id，必传参数
                name: 'user', // 渲染的input的name值
                hasSelectIcon: true,
                layFilter: 'user', //同layui form参数lay-filter
                layVerify: 'required', //同layui form参数lay-verify
                layVerType: '', // 同layui form参数lay-verType
                layReqText: '请填写文本', //同layui form参数lay-ReqText
                initValue: '', // 渲染初始化默认值
                placeholder: '输入或选择用户', // 渲染的inputplaceholder值
                // 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样
                invisibleMode: true,
                ignoreCase: true,
                data: {{ users|tojson }},
                hasCut: true, // 是否允许剪贴
                remoteSearch: false, // 是否启用远程搜索 默认是false，和远程搜索回调保存同步
            });

            //表单取值
            layui.$('#LAY-component-form-getval').on('click', function () {
                var data = form.val('example');
                alert(JSON.stringify(data));
            });

            console.log({{ users|tojson }})
            //拖拽上传
            upload.render({
                elem: '#upload',
                url: '/upload',
                method: 'POST',
                auto: false,
                accept: 'file',
                exts: 'xlsx|xls',
                bindAction: '#submit',
                data: {
                    title: function () {
                        return $('#title').val();
                    },
                    user_id: function () {
                        let ins = selectInput.getInstance("#user");
                        // 获取选中的value值
                        let selectValue = ins.getValue();
                        return selectValue.value
                    }
                },
                done: function (res) {
                    if (res.status === 200) {
                        layui.$('#uploadDemoView').removeClass('layui-hide');
                        layer.msg('上传成功', {time: 1000}, function () {
                            location.href = '/charts/' + res.title_id
                        });
                    } else {
                        layer.msg('上传失败')
                    }
                }
            });

        });
    </script>
{% endblock %}